<div class="container" style="padding-top: 30px;">
    <div class="row">
        <div class="col-9 col-md-9">
            <h1>Groups</h1>
        </div>
        <div class="col-md-3 col-3 align-right">
            <button type="button" mdbBtn gradient="aqua" rounded="true" class="relative waves-light" mdbWavesEffect rounded="true" data-toggle="modal" data-target="#addGroup" mdbWavesEffect (click)="isEditMode(false);resetForm();addGroupModal.show()"><mdb-icon fas icon="plus" class="mr-1"></mdb-icon>Add group</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-12 mx-auto">
          <div class="md-form">
            <input type="text" [(ngModel)]="searchText" class="form-control" id="search" mdbInput>
            <label for="search">Search</label>
          </div>
        </div>
    </div>
	<table mdbTable calss="table" #tableGroups="mdbTable" >
	  <thead class="thead-light">
	    <tr>
	      <th>Name</th>
	      <th>Policy</th>
	      <th>Status</th>
	      <th>Members</th>
	      <th>Options</th>
	    </tr>
	  </thead>
	  <tbody *ngIf="groups">
	    <tr mdbTableCol *ngFor="let g of objectKeys(groups); let i = index">
	      <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"><strong>{{groups[i].name}}</strong></td>
	      <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"><a *ngIf="groups[i].policy" (click)="rawPrepare(groups[i].policy); rawViewModal.show()"  mdbTooltip="View Raw JSON" placement="top">{{groups[i].policy}}</a></td>
	      <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{groups[i].status}}</td>
	      <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
          <ul class="type-none">
            <li class="type-none" *ngFor="let member of groups[i].members">{{member}}</li>
          </ul>
        </td>
	  	  <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
	  	  	<a mdbTooltip="Edit Group" placement="top" (click)="resetForm();getGroupDescription(groups[i].name);addGroupModal.show()"><mdb-icon fas icon="pencil-alt" size="1x" class="red-text pr-2" aria-hidden="true"></mdb-icon></a>
	  	  	<a *ngIf="groups[i].members.length < 1" mdbTooltip="Delete Group" placement="top" (click)="resetForm();markGroupToDelete(groups[i].name);deleteApproveModal.show()"><mdb-icon fas icon="trash-alt" size="1x" class="red-text pr-2" aria-hidden="true"></mdb-icon></a>
	  	  	<a *ngIf="groups[i].members.length > 0" mdbTooltip="You can delete only groups whit no memebers" placement="top"><mdb-icon fas icon="trash-alt" size="1x" class="gray-text pr-2" aria-hidden="true"></mdb-icon></a>
	  	  </td>
	    </tr>
	  </tbody>
      <tfoot class="grey lighten-5 w-100">
        <tr>
          <td colspan="5">
            <mdb-table-pagination [tableEl]="tableGroups" [searchDataSource]="groups"></mdb-table-pagination>
          </td>
        </tr>
      </tfoot>
	</table>
</div>
<br/>
<br/>

<!-- create modal -->

<div mdbModal #addGroupModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
   aria-hidden="true" [config]='{backdrop: true, ignoreBackdropClick: true}'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="addGroupModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">{{modalCreateEditTitle}}</h4>
            </div>
            <div class="modal-body">
                <div class="d-flex justify-content-around p-1 mb-3 text-center">
        					<input type="text" class="form-control" placeholder="Group Name" [(ngModel)]="newGroupName" name="newGroupName"  aria-label="groupName" aria-describedby="basic-addon1" autofocus>
        				</div>
        				<div class="d-flex justify-content-around p-1 mb-3 text-center">
        					<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
        				    [settings]="dropdownSettings"
        				    (onSelect)="onItemSelect($event)"
        				    (onDeSelect)="OnItemDeSelect($event)"
        				    (onSelectAll)="onSelectAll($event)"
        				    (onDeSelectAll)="onDeSelectAll($event)"></angular2-multiselect>
        				</div>
        				<div class="md-form mb-4">
        				  <select class="browser-default custom-select" [(ngModel)]="newGroupPolicy" title="select policy">
        						<option value="" disabled selected>Select policy</option>
        						<option [value]="policy" *ngFor="let policy of policies">{{policy}}</option>
        				  </select>
        				</div>
        				<div class="md-form mb-4">
        				  <select class="browser-default custom-select" [(ngModel)]="newGroupStatus" title="select status">
        						<option value="" disabled selected>Select status</option>
        						<option [value]="updateStatusVal" *ngFor="let updateStatusVal of updateStatusValues">{{updateStatusVal}}</option>
        				  </select>
        				</div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" mdbBtn gradient="peach" rounded="true" class="relative waves-light" mdbWavesEffect (click)="createGroup(); addGroupModal.hide()">{{modalCreateEditButtonText}}</button>
            </div>
        </div>
    </div >
</div >

<!-- delete approve modal -->

<div mdbModal #deleteApproveModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
   aria-hidden="true" [config]='{backdrop: true, ignoreBackdropClick: true}'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="deleteApproveModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Remove Group</h4>
            </div>
            <div class="modal-body">
                Are you shure? <br/> After you click on <strong>"Delete"</strong> button group <strong>{{groupToDelete}}</strong> will be removed.
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" mdbBtn color="success" class="waves-light" aria-label="Close" (click)="deleteApproveModal.hide()" mdbWavesEffect>Cancel</button>
                <button type="button" mdbBtn color="danger" class="relative waves-light" mdbWavesEffect (click)="deleteGroup(); deleteApproveModal.hide()">Delete</button>
            </div>
        </div>
    </div >
</div >

<!-- raw policy modal -->

<div mdbModal #rawViewModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog" aria-labelledby="rawViewModalLabel"
   aria-hidden="true" [config]='{backdrop: true, ignoreBackdropClick: true}'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="rawViewModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Raw Policy</h4>
            </div>
            <div class="modal-body">
            	<ngx-json-viewer [json]="rawView"></ngx-json-viewer>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="rawViewModal.hide()" mdbWavesEffect>Close</button>
            </div>
        </div>
    </div >
</div >
